/**
 * @file 自定义样式地图
 */
 import "assets/styles/common/index.less";
 import 'ol/ol.css';
 import Map from 'ol/Map';
 import VectorTileLayer from 'ol/layer/VectorTile';
 import VectorTileSource from 'ol/source/VectorTile';
 import { createXYZ } from 'ol/tilegrid';
 import { get } from 'ol/proj';
 import Projection from 'ol/proj/Projection';
 import View from 'ol/View';
 import { Style, Fill, Stroke } from 'ol/style'
 import olms from "ol-mapbox-style";
 import stylefunction from 'ol-mapbox-style/dist/stylefunction';
 // import styleJson from './osm_liberty.json'
 import styleJson from './style.js'
 import MVT from "ol/format/MVT";
 
 // const tmsUrl = 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/china%3Achina@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf'
 const tmsUrl = 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/demo%3Ademo_map@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf'
 const projection900913 = new Projection({
   code: 'EPSG:900913',
   units: 'm',
   axisOrientation: 'neu'
 });
 const vectorTileLayer = new VectorTileLayer({
   projection: projection900913,
   source: new VectorTileSource({
     title: '中国地图',
     format: new MVT(),
     projection: projection900913,
     tileGrid: createXYZ({
       extent: get('EPSG:900913').getExtent(),
       maxZoom: 22
     }),
     tilePixelRatio: 1,
     url: tmsUrl,
     wrapX: false,
   }),
   // style: function(feature) {
   //   return new Style({
   //     fill: new Fill({
   //       color: '#ADD8E6'
   //     }),
   //     stroke: new Stroke({
   //       color: '#880000',
   //       width: 1
   //     })
   //   })
   // }
 }) 
 
 stylefunction(vectorTileLayer, styleJson, 'china')
 
 const map = new Map({
   layers: [
     vectorTileLayer
   ],
   target: 'map',  // 将地图和页面标签元素关联
   view: new View({  // 创建视图, 类似于望远镜, 我们通过望远镜看地图，可以拉近也可以拉远
     projection: projection900913,
     center: [0, 0], // 默认中心点
     zoom: 2,  // 默认缩放级别
   }),
 });
 // const key = 'pk.eyJ1IjoiZHJlbXRyaSIsImEiOiJja3M4Z3gyajEwanRsMnZub3ZtMnZkMWw2In0.Cnh-3JeCbhDph34ZRKk7aQ'
 // olms(map, 'https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=' + key)
 // olms(map, styleJson)
  